<template>
	<!-- 商机详情 -->
  <view class="recruitment-detail">
    <view class="detail-content">
      <!-- 1. 基础信息卡片：核心字段与动态标签对齐 -->
      <view class="base-info-card">
        <!-- 动态主标题（如工程类型/采购物资名称） -->
        <view class="info-item">
          <text class="info-label">{{ fieldLabels.primaryType }}：</text>
          <text
            class="info-value"
            style="font-size: 30rpx; font-weight: bolder"
            >{{ form.need_type || "未填写" }}</text
          >
        </view>

        <!-- 需求标题 -->
        <view class="info-item">
          <text class="info-label">需求标题：</text>
          <text class="info-value">{{ form.need_title || "未填写" }}</text>
        </view>

        <!-- 预估金额：除物资采购（company_type=3）外显示 -->
        <view class="info-item" v-if="form.company_type != 3">
          <text class="info-label">{{ fieldLabels.amount }}：</text>
          <text class="info-value">{{ form.need_amount || "未填写" }}</text>
        </view>

        <!-- 规格+数量：仅物资采购（company_type=3）显示 -->
        <view class="info-item" v-if="form.company_type == 3">
          <text class="info-label">规格：</text>
          <text class="info-value">{{ form.goods_attr || "未填写" }}</text>
        </view>
        <view class="info-item" v-if="form.company_type == 3">
          <text class="info-label">数量：</text>
          <text class="info-value">{{ form.goods_num || "未填写" }}</text>
        </view>

        <!-- 动态要求项（如工程要求/质量要求） -->
        <view class="info-item">
          <text class="info-label">{{ fieldLabels.requirements }}：</text>
          <text class="info-value">{{ form.need_yao_qiu || "未填写" }}</text>
        </view>
        <!-- 动态时间项（如施工时间/供货时间） -->
        <view class="info-item">
          <text class="info-label">{{ fieldLabels.time }}：</text>
          <text class="info-value">{{ form.need_time || "未填写" }}</text>
        </view>
        <!-- 付款方式 -->
        <view class="info-item">
          <text class="info-label">付款方式：</text>
          <text class="info-value">{{ form.need_pay_type || "未填写" }}</text>
        </view>
        <!-- 项目所在地 -->
        <view class="info-item">
          <text class="info-label">项目所在地：</text>
          <text class="info-value">{{ form.need_city_name || "未填写" }}</text>
        </view>

        <!-- 动态公司要求（如对工程公司要求） -->
        <view class="info-item">
          <text class="info-label"
            >{{ fieldLabels.companyRequirements }}：</text
          >
          <text class="info-value">{{ form.company_yao_qiu || "未填写" }}</text>
        </view>

        <!-- 信息截至日期（合并原两个字段） -->
        <view class="info-item">
          <text class="info-label">本信息截至日期：</text>
          <text class="info-value">{{ form.need_ent_date || "未填写" }}</text>
        </view>
      </view>

      <!-- 4. 资讯购买区域（原业务逻辑：未购买时显示） -->
      <view
        v-if="form.view_status != 4 && !form.self_fa && pay_can == 1"
        class="base-info-card"
      >
        <u-empty
          mode="data"
          :text="statusConfig.text"
          :icon="getResource('img/phone/mini/no_data.png')"
        />
        <view
          @click="handleItemClick(form)"
          style="
            display: flex;
            padding: 10px 20px;
            background-color: #007aff;
            color: white;
            border-radius: 5px;
            text-align: center;
            font-size: 16px;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s;
            width: 35%;
            margin: 10px auto;
            justify-content: center;
          "
        >
          报名本条资讯
        </view>
      </view>

      <!-- 5. 需求单位+联系人信息（原业务逻辑：已购买/自己发布时显示） -->
      <view v-if="form.view_status == 4 || form.self_fa" class="base-info-card" >
        <view
          v-if="!form.self_fa"
          style="
            font-size: 24rpx;
            line-height: 40rpx;
            color: #666;
            box-sizing: border-box;
          "
        >
          {{ form.show_note }}
        </view>
        <!-- <view v-else>
          <view class="info-item" v-if="form.company_type == 2">
            <text class="info-label">采购单位：</text>
            <text class="info-value">{{ form.need_yao_qiu || "未填写" }}</text>
          </view>
          <view class="info-item" v-else>
            <text class="info-label">需求单位：</text>
            <text class="info-value">{{ form.company_name || "未填写" }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">联系人：</text>
            <text class="info-value">{{
              form.linkman_realname || "未填写"
            }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">职务：</text>
            <text class="info-value">{{ form.linkman_duty || "未填写" }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">电话：</text>
            <text class="info-value">{{
              form.linkman_mobile || "未填写"
            }}</text>
          </view>
        </view> -->
      </view>
    </view>

    <!-- 7. 弹窗组件（原业务逻辑） -->
    <cardPopup v-model="state.on_of" />
    <u-modal
      :show="state.modalOn_of"
      title="系统消息"
      :showCancelButton="true"
      confirmText="立即充值"
      cancelText="立即购买"
      @cancel="modalCancel(1)"
      @confirm="modalCancel(2)"
    >
      <view class="slot-content"> 您当前余额不足,立刻充值有优惠 </view>
    </u-modal>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, computed, toRefs } from "vue";
import {
  showToast,
  showLoading,
  hideLoading,
  showModalNoCancel,
  showModal,
} from "@/utils/toast";
import { getResource } from "../../../utils/Resource";
import { getIndexPubId } from "@/api/demand.js";
import { onShow, onLoad } from "@dcloudio/uni-app";
import { Postfinish } from "../../../api/news";
import { PostNeed_id } from "@/api/news.js";

// 状态管理
const state = reactive({
  modalOn_of: false,
  on_of: false,
  dataList: [],
  count: 0,
  indexId: null,
  indexType: "",
  form: {},
  pay_can: 0,
});

const { form, pay_can, dataList } = toRefs(state);

// 计算属性：根据公司类型动态生成字段标签
const fieldLabels = computed(() => {
  switch (Number(form.value.company_type)) {
    case 2: // 工程公司
      return {
        primaryType: "工程类型",
        amount: "预估工程费总额",
        requirements: "工程要求",
        time: "施工时间",
        companyRequirements: "对工程公司要求",
      };
    case 3: // 物资采购
      return {
        primaryType: "采购物资名称",
        amount: "预估采购费总额",
        requirements: "质量要求",
        time: "供货时间",
        companyRequirements: "对供应商质量要求",
      };
    case 4: // 设计公司
      return {
        primaryType: "设计业务类型",
        amount: "预估设计费总额",
        requirements: "设计要求",
        time: "设计时间",
        companyRequirements: "对设计公司要求",
      };
    case 5: // 监理公司
      return {
        primaryType: "监理业务类型",
        amount: "预估监理费总额",
        requirements: "监理内容",
        time: "监理时间",
        companyRequirements: "对监理公司要求",
      };
    case 6: // 劳务队伍
      return {
        primaryType: "劳务类型",
        amount: "预估劳务费总额",
        requirements: "施工内容",
        time: "施工时间",
        companyRequirements: "对劳务公司要求",
      };
    default:
      return {
        primaryType: "项目类型",
        amount: "预估费用总额",
        requirements: "项目要求",
        time: "项目时间",
        companyRequirements: "对合作方要求",
      };
  }
});

const statusConfig = computed(() => {
  const configs = {
    1: { text: "未登录" },
    2: { text: "登录未认证" },
    3: { text: "未报名" },
    4: { text: "已报名" },
  };
  return configs[form.value.view_status] || { text: "暂无数据" };
});

onLoad(async (e) => {
  try {
    state.indexId = e.id;
    if (e.type) {
      state.indexType = e.type;
    }
    await init();
  } catch (error) {
    console.error(error);
  }
  const userinfo = uni.getStorageSync("userinfo");
  pay_can.value = userinfo.pay_can;
});

const handleItemClick = async (e) => {
  showModal(
    {
      title: "系统消息",
      content: `购买本条信息需要花费${e.pay_amount}元，您当前的余额为${e.user_balance}`,
    },
    (result) => {
      if (result.confirm) {
        setTimeout(() => {
          PostNeed_id(e.id).then((res) => {
            if (res.data == "1") {
              dataList.value = [];
              init();
              showModal(
                {
                  title: "系统消息",
                  content: "您的已购买",
                  showCancel: false,
                },
                (result) => {}
              );
              return;
            }
            state.modalOn_of = true;
            zhiFuShuJu.value = res.data;
          });
        }, 500);
      }
    }
  );
};

const init = async () => {
  try {
    showLoading("加载中...");
    const res = await getIndexPubId({ id: state.indexId });
    console.log(res.data);
    if (res.data.need_title) {
      uni.setNavigationBarTitle({
        title: res.data.need_title,
      });
    }
    state.form = res.data;
  } catch (error) {
    console.error(error);
    showToast("加载失败");
  } finally {
    hideLoading();
  }
};

const finished = async () => {
  try {
    showLoading("处理中...");
    const res = await Postfinish(state.indexId);
    console.log(res);
    if (res.code == 10000) {
      showToast("已完成");
      setTimeout(() => {
        uni.navigateBack({
          delta: 1,
        });
      }, 500);
    }
  } catch (error) {
    console.error(error);
    showToast("操作失败");
  } finally {
    hideLoading();
  }
};

const zhiFuShuJu = ref();
const modalCancel = (e) => {
  state.modalOn_of = false;
  if (e == 1) {
    uni.requestPayment({
      provider: "wxpay",
      timeStamp: zhiFuShuJu.value.timestamp,
      nonceStr: zhiFuShuJu.value.nonceStr,
      package: zhiFuShuJu.value.package,
      signType: "MD5",
      paySign: zhiFuShuJu.value.paySign,
      success: function (res) {
        if (res.code == 10000) {
          init();
          uni.showToast({
            title: "充值成功",
            icon: "success",
            duration: 2000,
          });
        }
      },
      fail: function (err) {
        uni.showToast({
          title: "充值失败请联系管理员",
          icon: "error",
          duration: 2000,
        });
        console.log("fail:" + JSON.stringify(err));
      },
    });
  } else {
    state.on_of = true;
  }
};
</script>

<style lang="scss" scoped>
/* 全局容器样式 */
.recruitment-detail {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f7fa;
  box-sizing: border-box;
}

/* 1. 顶部导航栏 */
.detail-header {
  margin-left: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  // position: fixed;
  // top: 0;
  // left: 0;
  // right: 0;
  // z-index: 99;
  // box-sizing: border-box;

  .back-icon {
    cursor: pointer;
  }

  .header-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
  }

  .header-empty {
    width: 32rpx; // 与返回图标宽度一致，保持标题居中
  }
}

/* 2. 滚动容器 */
.detail-scroll {
  margin-top: 88rpx; // 避开顶部导航栏
  overflow-y: auto;
  box-sizing: border-box;
}

/* 3. 内容区域 */
.detail-content {
  padding: 24rpx 30rpx 120rpx; // 底部留空，避开操作按钮
  box-sizing: border-box;
}

/* 3.1 基础信息卡片 */
.base-info-card {
  background-color: #fff;
  border-radius: 24rpx;
  padding: 30rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);

  .info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24rpx;
    font-size: 26rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .info-label {
      color: #666;
      min-width: 180rpx; // 固定标签宽度，对齐更整齐
    }

    .info-value {
      color: #333;
      flex: 1; // 内容区自适应宽度
      line-height: 1.5;
    }

    // 状态标签样式
    .status-tag {
      padding: 6rpx 16rpx;
      border-radius: 16rpx;
      font-size: 22rpx;
      font-weight: 400;

      &.status-active {
        background-color: rgba(74, 144, 226, 0.1);
        color: #4a90e2;
      }
      &.status-error {
        background-color: rgb(255 5 5);
        color: white;
      }
      &.status-inactive {
        background-color: rgba(153, 153, 153, 0.1);
        color: #999;
      }
    }

    // 关键词标签容器
    .tags-container {
      align-items: center;
    }
  }
}

/* 3.2 内容标题 */
.content-title {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;

  text {
    font-size: 28rpx;
    font-weight: 500;
    color: #333;
    margin-right: 16rpx;
  }

  .title-line {
    flex: 1;
    height: 2rpx;
    background-color: #eee;
  }
}

/* 3.3 富文本容器 */
.rich-text-container {
  background-color: #fff;
  border-radius: 24rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);

  // 优化u-parse内部样式：图片自适应、文本行高
  :deep(.u-parse) {
    line-height: 1.8;
    font-size: 26rpx;
    color: #333;

    // 图片样式：宽度100%，避免溢出
    img {
      width: 100% !important;
      height: auto !important;
      border-radius: 16rpx;
      margin: 20rpx 0;
    }

    // 段落样式：上下间距
    p {
      margin-bottom: 20rpx;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

/* 3.4 底部操作按钮 */
.action-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx; // 标签间距
  flex: 1;
  .tag-item {
    padding: 8rpx 20rpx;
    background-color: #f0f5ff;
    color: #4a90e2;
    border-radius: 16rpx;
    font-size: 22rpx;
  }
}
</style>
